<template>
  <div class="box">
    <!-- 搜索及添加 -->
    <div class="BoxTop">
      <el-input placeholder="请输入角色名称" v-model="name" clearable>
      </el-input>
      <el-button type="primary" class="el-icon-search" @click="handleAll"
        >查找</el-button
      >
      <el-button type="primary" class="el-icon-edit" @click="handleKai"
        >添加</el-button
      >
    </div>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form
        :rules="rules"
        ref="ruleForm"
        :model="mo"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="mo.name"></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="mo.shuo"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleCreate()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 表格 -->
    <div class="BoxMiddle">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="角色名称" align="center">
        </el-table-column>
        <el-table-column prop="desc" label="说明" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleBian(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button type="primary" @click="authorization(scope.row)"
              >授权</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="BoxBottom">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="obj.currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="obj.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="obj.total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 授权框 -->
    <el-dialog title="提示" :visible.sync="popbox" width="30%">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="dafut"
        :props="defaultProps"
        ref="tree"
        highlight-current
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <el-tag
            v-if="node.isLeaf"
            size="mini"
            :type="data.api ? 'success' : 'primary'"
            ><span>{{ data.api }}</span></el-tag
          >
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popbox = false">取 消</el-button>
        <el-button type="primary" @click="popsurs">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRole,
  postCreate,
  postDelete,
  postUpdate,
  directory,
  directorysure,
} from "@/api/xitongguanli/role.js";
export default {
  data() {
    return {
      // 搜索框
      name: "",
      // 模态框
      dialogVisible: false,
      title: "",
      // 编辑模态框验证
      rules: {
        name: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
      },
      // 模态框输入框
      mo: {
        name: "",
        shuo: "",
      },
      // 表格数据
      tableData: [],
      // 编辑
      bid: "",
      brow: {},
      // 分页
      obj: {
        page: 1,
        limit: 20,
        total: null,
        currentPage: 1,
      },
      //授权
      popbox: false,
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      permissions: "",
      authorizationdata: "",
      dafut:[],
    };
  },
  methods: {
    // 接口总数据和搜索
    handleAll() {
      getRole({
        page: this.obj.page,
        limit: this.obj.limit,
        name: this.name,
        sort: "add_time",
        order: "desc",
      }).then((res) => {
        this.tableData = res.data.list;
        this.obj.total = res.data.total;
        console.log(res.data, "222222");
      });
    },
    // 添加打开模态框
    handleKai() {
      this.dialogVisible = true;
      this.title = "添加";
    },
    // 编辑打开模态框
    handleBian(row) {
      this.bid = row.id;
      this.brow = row;
      console.log(this.brow, "编辑");
      this.dialogVisible = true;
      this.title = "编辑";
      this.mo.name = row.name;
      this.mo.shuo = row.desc;
    },
    // 新增
    handleCreate() {
      if (this.bid == "") {
        postCreate({
          desc: this.mo.shuo,
          name: this.mo.name,
        }).then((res) => {
          if (res.errmsg == "成功") {
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
            });
            this.handleAll();
            this.dialogVisible = false;
            this.mo = {
              name: "",
              shuo: "",
            };
          }
        });
      } else {
        postUpdate({
          addTime: this.brow.addTime,
          deleted: this.brow.deleted,
          desc: this.mo.desc,
          enabled: this.brow.enabled,
          id: this.brow.id,
          name: this.mo.name,
          updateTime: this.brow.updateTime,
        }).then((res) => {
          if (res.errmsg == "成功") {
            this.$notify({
              title: "成功",
              message: "更新管理员成功",
              type: "success",
            });
            this.handleAll();
            this.dialogVisible = false;
            this.mo = {
              name: "",
              shuo: "",
            };
          }
        });
      }
    },
    // 删除
    handleDelete(row) {
      // console.log(row, "删除");
      postDelete({
        addTime: row.addTime,
        deleted: row.deleted,
        desc: row.desc,
        enabled: row.enabled,
        id: row.id,
        name: row.name,
        updateTime: row.updateTime,
      }).then((res) => {
        if (res.errmsg == "成功") {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
          });
          this.handleAll();
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.obj.limit = val;
      this.handleAll();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.obj.page = val;
      this.handleAll();
      console.log(`当前页: ${val}`);
    },
    //授权
    authorization(a, row) {
      this.popbox = true;
      console.log(a, row);
      this.authorizationdata = a;
      directory(a.id).then((res) => {
        if (res.errmsg == "成功") {
          //console.log(res)
          this.data = res.data.systemPermissions;
          this.dafut=res.data.assignedPermissions;
        }
      });
    },
    popsurs() {
      this.permissions = this.$refs.tree.getCheckedKeys();
      let res = {};
      res.permissions = this.permissions;
      res.roleId = this.authorizationdata.id;
      //console.log(res);
      directorysure(res).then((res) => {
        if (res.errmsg == "成功") {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.handleAll();
          this.popbox = false;
        }
      });
    },
  },
  mounted() {
    this.handleAll();
  },
};
</script>

<style scoped lang="scss">
.box::v-deep {
  width: 98%;
  padding: 1%;
  .BoxTop {
    width: 30%;
    display: flex;
    margin-top: 10px;
  }
  .BoxMiddle {
    margin: 10px 0;
  }
}
</style>
